<template>
  <CollapseContainer class="w-full bg-white rounded-md" title="消息提示">
    <a-button @click="showInfo" class="ml-5 mt-5"> 基本用法 </a-button>
    <a-button @click="showSuccess" class="ml-5 mt-5" color="success"> 自定义消失时间 </a-button>
    <a-button @click="showWarn" class="ml-5 mt-5" color="warning"> 监听消失方法 </a-button>
    <a-button @click="showError" class="ml-5 mt-5" color="error"> Error消息 </a-button>

    <div class="w-full bg-white rounded-md">
      <ol class="ml-5 mt-5 pb-3">
        <li class="mt-2">封装的是 ant 的 message 组件 </li>
        <li class="mt-2">元素有: 图标、消息内容 </li>
        <li class="mt-2">封装了 info|success|warning|error 四个方法, 用法一致，只是图标不同 </li>
        <li class="mt-2">
          <a href="https://www.antdv.com/components/message-cn">ant message 官方文档</a>
        </li>
      </ol>
    </div>

    <CollapseContainer class="w-full bg-white rounded-md" title="源码">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>
  </CollapseContainer>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';

  import { MarkdownViewer } from '@/components/Markdown';

  import { useMessage } from '@/hooks/web/useMessage';

  const { info, success, warning, error } = useMessage().createMessage;

  // 基本用法
  function showInfo() {
    info('Info message, 默认持续3s');
  }

  // 自定义消失时间
  function showSuccess() {
    success('success 消息,自定义持续5s ', 5);
  }

  // 监听消失方法
  function showWarn() {
    warning('消息消失时，触发回调, 不常用', 3, () => {
      console.log('提示框消失');
    });
  }

  // Error 消息
  function showError() {
    error('error 消息,自定义持续5s ', 5);
  }
</script>

<script lang="ts">
  function getDoc() {
    return `



\`\`\`typescript
import { useMessage } from '@/hooks/web/useMessage';

  const { info, success, warning, error } = useMessage().createMessage;

  // 基本用法
  function showInfo() {
    info('Info message, 默认持续3s');
  }

  // 自定义消失时间
  function showSuccess() {
    success('success 消息,自定义持续5s ', 5);
  }

  // 监听消失方法
  function showWarn() {
    warning('消息消失时，触发回调, 不常用', 3, () => {
      console.log('提示框消失');
    });
  }

  // Error 消息
  function showError() {
    error('error 消息,自定义持续5s ', 5);
  }
\`\`\`

`;
  }
</script>
